import { SlateEditor, SlateElement, SlateTransforms } from '@wangeditor/editor';


// 菜单 key
export const MENU_KEY = 'insertNewMenu';
// 菜单名
export const MENU_NAME = '页边距';

class menu {
  constructor() {
    this.title = MENU_NAME;
    this.iconSvg = '<svg viewBox="0 0 1024 1024"><path d="M498.7 655.8l-197.6-268c-8.1-10.9-0.3-26.4 13.3-26.4h395.2c13.6 0 21.4 15.4 13.3 26.4l-197.6 268c-6.6 9-20 9-26.6 0z"></path></svg>';  // 在工具栏展示的图标，不设置图标会显示title
    this.tag = 'button';
    this.showModal = true;
    this.modalWidth = 300;
    this.margin = '0px';
    this.modalDom = null;
  }

  // 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
  isActive(editor) {
    return false;
  }

  // 获取菜单执行时的 value ，用不到则返回空 字符串或 false
  getValue(editor) {
    return '';
  }

  // 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
  isDisabled(editor) {
    return false;
  }

  // 弹出框 modal 的定位：1. 返回某一个 SlateNode； 2. 返回 null （根据当前选区自动定位）
  getModalPositionNode(editor) {
    return null; // modal 依据选区定位
  }

  // 定义 modal 内部的 DOM Element
  getModalContentElem(editor) {
    if (this.modalDom) {
      return this.modalDom;
    }
    // 创建一个div元素
    const divElement = document.createElement('div');
    divElement.style.marginBottom = '30px';
    divElement.style.marginTop = '10px';
    // 创建页边距输入框
    const marginInput = document.createElement('input');
    marginInput.type = 'text';
    marginInput.placeholder = '请输入页边距';
    marginInput.style.marginBottom = '10px';
    marginInput.addEventListener('change', e => {
      const val = e.target.value;
      this.padding = val.includes('px') ? val : val + 'px';
    });

    // 创建确定按钮
    const confirmButton = document.createElement('button');
    confirmButton.textContent = '确定';
    confirmButton.style.marginRight = '20px';
    confirmButton.addEventListener('click', () => {
      // 恢复最近一次非 null 选区。如编辑器 blur 之后，再重新恢复选区，否则“基于当前选区”的操作无效
      editor.restoreSelection();

      const nodeEntries = SlateEditor.nodes(editor, {
        match: (node) => {
          if (SlateElement.isElement(node)) {
            return true;
          }
          return false;
        },
        universal: true
      });

      const children = [];
      if (nodeEntries == null) {
        children.push({ text: '' });
      } else {
        for (const nodeEntry of nodeEntries) {
          const [node] = nodeEntry;
          children.push(node);
        }
      }

      const targetNode = {
        type: 'insertNewMenu',
        padding: this.margin,
        children
      };

      SlateTransforms.setNodes(editor, targetNode, { mode: 'highest' });
    });

    // 将页边距输入框、确定按钮和取消按钮添加到div元素中
    divElement.appendChild(marginInput);
    divElement.appendChild(confirmButton);

    // 缓存 modal
    this.modalDom = divElement;
    return divElement;
  }
}

// 自定义菜单配置
const menuConfig = {
  key: "insertNewMenu", // menukey 唯一。注册之后，需通过toolbarKeys配置到工具栏
  factory() {
    return new menu();
  },
};

export default menuConfig;
